<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打印水牌</title>
    <script>
        var pos = {
            ft: 156,             //默认字体大小
            paperx: 800,         //纸张默认宽度
            papery: 1133,         //纸张默认高度
            poslx: 400,          //名称横向默认调整位置
            posly: 900,          //名称竖向默认调整位置
            pos1x: 50,           //logo1横向默认调整位置
            pos1y: 700,          //logo1竖向默认调整位置
            zoom1: 1,            //logo1缩放比例
            pos2x: 220,          //logo2横向默认调整位置
            pos2y: 710,          //logo2竖向默认调整位置
            zoom2: 1,            //logo2缩放比例
            offsetx: 0,          //倒影的默认横向偏移长度
            offsety: 0         //倒影的默认竖向偏移长度
        }, els = Object.assign({},pos);
        els.fm = '微软雅黑';       //默认字体
        els.lst = ['张三','李四李四','王小二'];      //预设参考字符
        els.lg1 = new Image();    //logo元素1，勿动
        els.lg2 = new Image();    //logo元素2，勿动
        els.st = 'normal';       //默认字体风格
        els.wt = '400';        //默认字体粗细
    </script>
    <style media="print">
        @page {
            size: auto;
            margin: 0mm;
        }
    </style>
    <style>
        canvas {
            border: 1px solid black;
        }
        span{
            color: red;
        }
        .toprint {
            display: block;
            margin: auto;
        }
        .pre{
            width: 420px;
            height: 594px;
        }
    </style>
</head>

<body>
    <label for="offsetx">倒影偏移&emsp; 横</label><input type="range" max="2160" id="offsetx" oninput="chg(event)">
    <label for="offsety">竖</label><input type="range" max="3054" id="offsety" oninput="chg(event)">
    <span>&emsp;使用Chrome或Edge浏览器打开，其他浏览器可能会导致bug。logo缩放可能失真(适度调整或重做logo)</span>
    <br><br>
    <label for="paperx">纸张大小&emsp; 宽</label><input type="range" max="2160" id="paperx" oninput="chg(event)">
    <label for="papery">&emsp;高</label><input type="range" max="3054" id="papery" oninput="chg(event)">
    <span> 字体类型不全，如果系统不支持选定的字体，则恢复为微软雅黑</span>
    <br><br>
    <label for="lg1">logo1 </label><input type="file" id="lg1" oninput="chg(event)">
    <label for="pos1x">横  </label><input type="range" max="2160" id="pos1x" oninput="chg(event)">
    <label for="pos1y">竖  </label><input type="range" max="3054" id="pos1y" oninput="chg(event)">
    <label for="zoom1">缩放</label><input type="range" min="0.1" max="5.0" step="0.1" id="zoom1" oninput="chg(event)">
    <br><br>
    <label for="lg2">logo2 </label><input type="file" id="lg2" oninput="chg(event)">
    <label for="pos2x">横  </label><input type="range" max="2160" id="pos2x" oninput="chg(event)">
    <label for="pos2y">竖  </label><input type="range" max="3054" id="pos2y" oninput="chg(event)">
    <label for="zoom2">缩放</label><input type="range" min="0.1" max="5.0" step="0.1" id="zoom2" oninput="chg(event)">
    <br><br>
    <label for="lst">名单&emsp;</input></label><input type="file" id="lst" oninput="chg(event)">
    <label for="poslx">横  </label><input type="range" max="2160" id="poslx" oninput="chg(event)">
    <label for="posly">竖  </label><input type="range" max="3054" id="posly" oninput="chg(event)">
    <label for="ft">缩放</label><input type="range" min="10" max="1000" id="ft" oninput="chg(event)">
    <br><br>
    <label for="fm">字体</label><select id="fm" onchange="chg(event)"></select>
    <label for="st">&emsp;样式</label><select id="st" onchange="chg(event)"></select>
    <br><br>
    <button onclick="resets()">重置位置</button>&emsp;&emsp;<button onclick="prints()">打印</button><br><br>
    <div id="preview"> </div>
    <script>
        var fonts = ['微软雅黑','宋体','新宋体','楷体','华文中宋','隶书','华文细黑','华文琥珀','华文彩云','黑体','仿宋','方正舒体','等线','方正粗黑宋简体','华文行楷'];
        var styles = ['常规,normal','斜体,italic','粗体,700','非粗体,400'];
        var fm = document.getElementById('fm'),st = document.getElementById('st');
        for(let f of fonts){
            let opt = document.createElement('option');
            opt.value = f;
            opt.innerText = f;
            fm.appendChild(opt);
        }
        for(let s of styles){
            let opt = document.createElement('option');
            opt.value = s;
            opt.innerText = s;
            st.appendChild(opt);
        }
        var inputs = new Map();
        for(let [k,v] of Object.entries(pos)){
            inputs.set(k,document.getElementById(k));
            inputs.get(k).value = v;
        }
        var preview = document.getElementById('preview');
        function drawit() {
            let zoom1w = els.lg1.naturalWidth * els.zoom1,zoom1h = els.lg1.naturalHeight * els.zoom1,
                zoom2w = els.lg2.naturalWidth * els.zoom2,zoom2h = els.lg2.naturalHeight * els.zoom2;
            preview.innerHTML = '';
            for (let txt of els.lst) {
                if(txt.length < 3){
                    txt = txt[0] + '   ' + txt[1];
                }
                let canvas = document.createElement('canvas');
                let img = new Image();
                img.className = 'pre'
                canvas.setAttribute('width', els.paperx + 'px');
                canvas.setAttribute('height', els.papery + 'px');
                preview.appendChild(img);
                let ctx = canvas.getContext('2d');
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.font = `${els.st} ${els.wt} ${els.ft}px ${els.fm}`;
                ctx.textAlign = 'center';
                ctx.fillText(txt, els.poslx, els.posly);
                ctx.drawImage(els.lg1, els.pos1x, els.pos1y, zoom1w, zoom1h);
                ctx.drawImage(els.lg2, els.pos2x, els.pos2y, zoom2w, zoom2h);
                ctx.translate(canvas.width, canvas.height);
                ctx.rotate(Math.PI);
                ctx.fillText(txt, els.poslx - els.offsetx, els.posly - els.offsety);
                ctx.drawImage(els.lg1, els.pos1x - els.offsetx, els.pos1y - els.offsety, zoom1w, zoom1h);
                ctx.drawImage(els.lg2, els.pos2x - els.offsetx, els.pos2y - els.offsety, zoom2w, zoom2h);
                img.src = canvas.toDataURL();
            }
        }
        function resets() {
            for(let [k,v] of Object.entries(pos)){
                els[k] = v;
                inputs.get(k).value = v;
            }
            drawit();
        }
        function prints() {
            for(let i of document.getElementsByTagName('img')){
                i.className = 'toprint';
            }
            document.body.innerHTML = preview.innerHTML;
            setTimeout(() => {
                window.print();
                window.location.reload();
            }, 500);
        }
        function chg(ev) {
            let e = ev.target;
            if (e.id === 'lst') {
                let reader = new FileReader();
                reader.onload = () => {
                    els.lst = reader.result.split('\r\n');
                    e.value = ''; //避免后续同名文件不触发
                }
                reader.readAsText(e.files[0]);
            } else if (e.id.startsWith('lg')) {
                let reader = new FileReader();
                reader.onload = () => {
                    els[e.id].src = reader.result;
                    e.value = '';
                }
                reader.readAsDataURL(e.files[0]);
            }else if(e.id==='st'){
                if(st.selectedIndex > 1){
                    els.wt = e.value.split(',')[1]
                }else els.st = e.value.split(',')[1];
            } else {
                els[e.id] = e.value;
            }
            setTimeout(() => {
                drawit();
            }, 100);
        }
    </script>
</body>

</html>